﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Options</title>
    <link rel="stylesheet" href="style/pub/common.css"/>
    <link rel="stylesheet" href="style/undecorated/colResizer.css"/>
    <link rel="stylesheet" href="style/undecorated/treeTable.css"/>
    <link rel="stylesheet" href="style/undecorated/popupMenu.css"/>

    <link rel="stylesheet" href="style/undecorated/dropdown.css"/>
    <link rel="stylesheet" href="style/undecorated/timePicker.css"/>
    <link rel="stylesheet" href="style/undecorated/datetimePicker.css"/>

    <link rel="stylesheet" href="style/undecorated/progressBar.css"/>

    <link rel="stylesheet" href="style/todo.css"/>

    <style>

        * {
            font-family: 'segou ui', 'simsun';
            font-size: 9pt;
        }

        h1 {
            font-size: 16pt;
            margin-bottom: 6px;
        }

        div.buttonsPanel {
            margin-top: 16px;
        }

        div.fieldsetBody {
            margin: 1em;
        }

        fieldset {
            margin-top: 6px;
        }

    </style>

    <script src="script/lib/jquery.js"></script>
    <script src="script/pub/jsex.js"></script>
    <script src="script/pub/jqueryex.js"></script>
    <script src="script/pub/domex.js"></script>

    <script src="script/undecorated/core.js"></script>

    <script src="script/undecorated/popupMenu.js"></script>

    <script src="script/undecorated/dropdown.js"></script>
    <script src="script/undecorated/selectGrid.js"></script>
    <script src="script/undecorated/numberInput.js"></script>
    <script src="script/undecorated/repeatButton.js"></script>
    <script src="script/undecorated/timePicker.js"></script>
    <script src="script/undecorated/datetimePicker.js"></script>
    <script src="script/undecorated/datetimeInput.js"></script>

    <script>
        var host = {
            close: function (save) {
                if ('close' in window.external) {
                    window.external.close(save);
                }
                else {
                    window.close();
                }
            },

            getOptions: function () {
                if ('getOptions' in window.external) {
                    var options = window.external.getOptions();
                    return options;
                }
                else {
                    return {
                        EmailTo: ''
                    };
                }
            },

            getLocalizedStrings: function () {
                if ('GetLocalizedStrings' in window.external) {
                    var s = window.external.GetLocalizedStrings();
                    if (!s) {
                        return null;
                    }
                    return JSON.parse(s);
                }
                return null;
            }
        };

        var options = host.getOptions();

        $(function () {
            $('#btnCancel').on('click', function () {
                host.close(false);
            });
            $('#btnOk').on('click', function () {
                collectOptions();
                host.close(true);
            });

            $('#txtEmailTo').val(options.EmailTo);
            if (options.TopDownMode) {
                $('#optTopDown').attr('checked', 'checked');
            }
            else {
                $('#optBottomUp').attr('checked', 'checked');
            }
            if(options.OpenLastFileOnStart){
                $('#chkOpenLastFileOnStart').attr('checked', 'checked');
            }
        });

        function collectOptions() {
            options.EmailTo = $('#txtEmailTo').val();
            options.TopDownMode = $('#optTopDown').is(':checked');
            options.OpenLastFileOnStart = $('#chkOpenLastFileOnStart').is(':checked');
        }
    </script>
</head>
<body>

<h1 id="lblTitle">Options</h1>
<fieldset id="grpTodoDirection">
    <legend>New Todo Direction</legend>
    <div class="fieldsetBody">
        <input type="radio" id="optBottomUp" name="optDirection"><label
            for="optBottomUp">Bottom Up</label>
        <input type="radio" id="optTopDown" name="optDirection"><label
            for="optTopDown">Top Down</label>
    </div>
</fieldset>
<fieldset id="grpReminderSettings">
    <legend>Reminder Settings</legend>
    <div class="fieldsetBody">
        <label for="txtEmailTo" id="lblEmailTo">Email To</label>
        <input type="text" id="txtEmailTo"/>
    </div>
</fieldset>
<fieldset id="grpMisc">
    <legend>Miscellaneous</legend>
    <div class="fieldsetBody">
        <input type="checkbox" id="chkOpenLastFileOnStart"><label
        for="chkOpenLastFileOnStart">Open last todolist on start</label>
    </div>
</fieldset>
<div class="buttonsPanel">
    <input type="button" value="OK" id="btnOk"/>
    <input type="button" value="Cancel" id="btnCancel"/>
</div>
<script>
    var map = host.getLocalizedStrings();
    if(map) {
        $('#lblTitle').text(map['title.options']);
        $('#grpTodoDirection legend').text(map['title.todoDirection']);
        $('#grpReminderSettings legend').text(map['title.reminderSettings']);
        $('#grpMisc legend').text(map['title.misc']);
        $('label[for=optBottomUp]').text(map['lbl.bottomUp']);
        $('label[for=optTopDown]').text(map['lbl.topDown']);
        $('label[for=chkOpenLastFileOnStart]').text(map['lbl.openLastFileOnStart']);
        $('#lblEmailTo').text(map['lbl.emailTo']);
        $('#btnOk').val(map['action.ok']);
        $('#btnCancel').val(map['action.cancel']);
    }
</script>
</body>
</html>